<div class="container">
    <form class="form-signin" action="index.html">
      <h2 class="form-signin-heading">Please sign in</h2>
      <label for="inputEmail" class="sr-only">Email address</label>
      <input type="email" id="inputEmail" class="form-control" 
      placeholder="Email address" 
      autofocus
      required
      name="email"
      [(ngModel)]='signinForm.email'
      #email = "ngModel"
      email = "true">
      <div *ngIf = "email.invalid && (email.touched || email.dirty)"
    class="alert alert-danger">
    <div *ngIf = "email.errors.required">email is required</div>
    <div *ngIf = "email.errors.email">inputEmail is invalid</div>
    <!-- <div *ngIf ="email_err_msg" class="alert alert-danger">{{email_err_msg}}</div> -->
  </div>
      <label for="inputPassword" class="sr-only">Password</label>
      <input type="password" id="inputPassword" 
      class="form-control"
       placeholder="Password"
       minlength="6"
       maxlength="18"
       password = "true"
       required
      [(ngModel)]='signinForm.password'
      name="password"
      #password ="ngModel"
      >
      <div *ngIf = "password.invalid && (password.touched ||password.dirty)"
      class="alert alert-danger">
      <div *ngIf = "password.errors.required">password is required</div>

      <div *ngIf = "password.errors.minlength">minlength is 6</div>
      <div *ngIf = "password.errors.maxlength">maxlength is 18 </div>
    </div> 
      <button class="btn btn-lg btn-primary btn-block" type="submit"
      (click)="signin()">Sign in</button>
    </form>
    <div class="alert alert-danger" *ngIf="err_msg">{{err_msg}}</div>

    <p class="info"><a routerLink="/signup">Don't have an account? Create one here.</a></p>
  </div>
